<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { roleStore } from '@/stores/role'
import { headersStore } from '@/stores/apiHeader'
import { baseToolsStore } from '@/stores/baseTools'
//雇员人数趋势
import GlobalLaborCosts from '@/components/PermissionsModule/Human/GlobalLaborCosts.vue'
//人工成本总额趋势
import GlobalEmployeeLcPYear from '@/components/PermissionsModule/Human/GlobalEmployeeLcPYear.vue'
//人工成本比对
import GlobalLaborCostsContrast from '@/components/PermissionsModule/Human/GlobalLaborCostsContrast.vue'
//人效趋势
import HumanEffect from '@/components/PermissionsModule/Human/HumanEffect.vue'
//人效各国对比
import ComparisonHumanEffect from '@/components/PermissionsModule/Human/ComparisonHumanEffect.vue'
//元效趋势
import Metaeffect from '@/components/PermissionsModule/Human/Metaeffect.vue'
//元效各国对比
import ComparisonMetaeffect from '@/components/PermissionsModule/Human/ComparisonMetaeffect.vue'
const store = roleStore() as any
const isDepartment = computed(() => baseToolsStore().isDepartment) //是否是部门
const { humanLevel } = store
// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = humanLevel // 初始化面板权限
// 深度监听 store.panelPermissions
watch(
  () => store.humanLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
//获取当前月份
const month = computed(() => {
  return headersStore().month
})
// 是否为集团总部
const isHeadquarters = computed(() => {
  return headersStore().scope_code === '0000100001'
})

const props = defineProps({
  showRemainingComponents: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <GlobalLaborCosts v-if="newRole === 1 && month === '00'" />
  <GlobalEmployeeLcPYear v-if="newRole === 2 && month === '00'" />
  <GlobalLaborCostsContrast
    v-if="newRole != 0 && month !== '00' && !isHeadquarters && !isDepartment"
  />
  <CostProportionReport
    v-if="(isHeadquarters || isDepartment) && month !== '00' && newRole === 2"
  />
  <div v-if="showRemainingComponents">
    <HumanEffect
      v-if="newRole === 2 && month === '00' && !isHeadquarters && !isDepartment"
    />
    <ComparisonHumanEffect
      v-if="newRole === 2 && !isHeadquarters && !isDepartment"
    />
    <Metaeffect
      v-if="newRole === 2 && month === '00' && !isHeadquarters && !isDepartment"
    />
    <ComparisonMetaeffect
      v-if="newRole === 2 && !isHeadquarters && !isDepartment"
    />
  </div>
</template>
<style lang="scss" scoped></style>
